<template>
  <div class="flex h-full overflow-auto">
    <el-tabs
      v-model="activeOuterName"
      type="card"
      class="h-full"
      tab-position="left"
      @tab-click="handleOuterClick"
      @tab-change="changeCarEvent"
    >
      <el-tab-pane
        v-for="(item, index) in carStore.carList"
        :key="index"
        :label="item.name"
        :name="item.code"
      >
        <template #label>
          <div class="w-full">
            <!-- <span>{{ item.status === '1' ? '✅' : '🚫' }}</span> -->
            <span
              @dblclick="(event) => handleReName(item.code, event)"
              :title="item.name"
              class="inline-block w-20 whitespace-nowrap overflow-hidden text-ellipsis select-none align-middle"
              >{{ item.name }}</span
            >
            <span
              class="select-none"
              :title="`车辆状态：${carStatus.NewCurrentCarStatus.value === 1 ? '在线' : '离线'}`"
              >{{ carStatus.NewCurrentCarStatus.value === 1 ? '✅' : '🚫' }}</span
            >

            <span class="relative select-none">
              <Icon icon="humbleicons:battery" class="text-5xl align-middle"> </Icon
              ><span
                class="absolute inline-block top-1 left-2 text-[10px] text-center w-7"
                :title="`电量：${
                  carStatus.NewCurrentCarBattery.value && item.code === carStore.currentCar
                    ? carStatus.NewCurrentCarBattery.value
                    : '0'
                }`"
              >
                {{
                  carStatus.NewCurrentCarBattery.value && item.code === carStore.currentCar
                    ? carStatus.NewCurrentCarBattery.value
                    : 0
                }}%</span
              >
            </span>
            <span
              :title="
                carStatus.NewCurrentCarSpeed.value && item.code === carStore.currentCar
                  ? carStatus.NewCurrentCarSpeed.value
                  : '0'
              "
              class="select-none inline-block ml-1 w-20 whitespace-nowrap overflow-hidden text-ellipsis align-middle"
              >{{ t('che-su') }}:{{
                carStatus.NewCurrentCarSpeed.value && item.code === carStore.currentCar
                  ? carStatus.NewCurrentCarSpeed.value
                  : 0
              }}m/s</span
            >
            <el-switch
              :disabled="carStore.carList[index].code !== carStore.currentCar"
              class="mr-1"
              v-model="isConnectionList[index]"
              style="--el-switch-off-color: #ff4949"
              :active-text="t('lian-jie')"
              :inactive-text="t('duan-kai')"
              inline-prompt
              @Change="handleConnectionChange"
            />
            <el-link
              class="select-none"
              :disabled="carStore.carList[index].code !== carStore.currentCar"
              @Click="
                () => {
                  configDeviceStore.getList()
                  router.push({
                    path: '/mapHome/config/device',
                    query: {
                      code: carStore.currentCar
                    }
                  })
                }
              "
            >
              {{ t('pei-zhi-wai-she') }}
            </el-link>
          </div>
        </template>
        <template #default>
          <el-tabs
            v-model="activeInnerName1"
            tab-position="left"
            @tab-click="handleInnerClick1"
            class="select-none"
          >
            <el-tab-pane
              v-for="item in configList"
              :key="item.id"
              :label="item.name"
              :name="item.id"
              v-permission="priviList.UpperControl"
            >
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-tab-pane>
    </el-tabs>

    <div class="flex flex-1 p-1" v-show="activeInnerName1 === '1'">
      <PantiltControl />
      <LightControl />
      <BirdAwayControl />
    </div>

    <div class="p-1 flex-1" v-show="activeInnerName1 === '0'">
      <el-scrollbar>
        <div class="flex h-[24vh]">
          <div class="flex">
            <div class="flex flex-col mr-1">
              <TopControl :customMode="carStore.carCustomMode" />
              <RainGaugeControl />
              <CarObstaclesControl />
            </div>
            <div class="">
              <CarLightControl />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div class="flex flex-1 p-1" v-show="activeInnerName1 === '2'">
      <AlgorithmControl />
    </div>
  </div>
  <CameraForm />
  <ReNameDialog />
</template>
<script setup lang="ts">
import { getCarConnectStatus } from '@/api'
import * as carStatus from '@/business/carStatus'
import { useLightStore } from '@/business/light'
import { useReName } from '@/business/reName'
import { useTracking } from '@/business/tracking'
import AlgorithmControl from '@/components/AlgorithmControl.vue'
import BirdAwayControl from '@/components/BirdAwayControl.vue'
import CarLightControl from '@/components/CarLightControl.vue'
import CarObstaclesControl from '@/components/CarObstaclesControl.vue'
import Icon from '@/components/Icon.vue'
import LightControl from '@/components/LightControl.vue'
import PantiltControl from '@/components/PantiltControl.vue'
import RainGaugeControl from '@/components/RainGaugeControl.vue'
import ReNameDialog from '@/components/ReNameDialog.vue'
import TopControl from '@/components/TopControl.vue'
import { useBirdAway } from '@/composables/useBirdAway'
import { isConnectionList, useCarRelevant } from '@/composables/useCarRelevant'
import { useCarSelector } from '@/composables/useCarSelector'
import { priviList } from '@/shared/privileges'
import { useCarStore } from '@/stores/car'
import { useConfigDeviceStore } from '@/stores/configDevice'
import CameraForm from '@/views/Perimeter/Config/components/CameraForm'
import type { TabPaneName, TabsPaneContext } from 'element-plus'
import { debounce } from 'lodash'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const configDeviceStore = useConfigDeviceStore()
onBeforeUnmount(carStatus.tryCloseWS)
const { changeCar, visibleChange } = useCarSelector()
const { t } = useI18n()
const carStore = useCarStore()
const activeOuterName = ref<string | number>('')
const activeInnerName1 = ref<string | number>('0')
const { handleConnectionChange } = useCarRelevant()
const router = useRouter()
// const music = useMusicStore()
const light = useLightStore()
const { onClickBirdStatus } = useBirdAway()
const reName = useReName()
const configList = [
  {
    id: '0',
    name: '底盘控制'
  },
  {
    id: '1',
    name: '云台控制'
  },
  {
    id: '2',
    name: '算法控制'
  }
]

onMounted(async () => {
  if (carStore.carList.length === 0) {
    await visibleChange(true)
    if (!carStore.currentCar) {
      changeCar(carStore.carList[0].code)
      activeOuterName.value = carStore.carList[0].code
    } else {
      changeCar(carStore.currentCar)
      activeOuterName.value = carStore.currentCar
    }
  } else {
    const carList = carStore.carList.map((item: any) => {
      return item.code
    })
    const res: any = await getCarConnectStatus(carList)
    isConnectionList.value = res.data.map((item: any) => {
      return item.isConnect
    })
  }
})

const handleReName = (code: any, event: any) => {
  reName.visible = true
}

const handleOuterClick = (tab: TabsPaneContext) => {
  activeOuterName.value = tab.props.name as string
}

const changeCarEvent = debounce(async (name: TabPaneName) => {
  if (name !== carStore.currentCar) {
    changeCar(name)
    // visibleChange(true)
  }
})
const tracking = useTracking()
const handleInnerClick1 = (tab: TabsPaneContext) => {
  activeInnerName1.value = tab.props.name as string
  if (activeInnerName1.value === '1') {
    tracking.getTrackingState()
    // music.onClickStatus()
    // music.onClickMusicList()
    onClickBirdStatus()
    light.onClickLightStatus()
  }
}
// const changeTabPaneCar = async () => {
//   if (activeInnerName1.value === '0') {
//     const res = await getCarInfo(carStore.currentCar!)
//     carCustomMode.value = res.data.customMode
//   }
// }
</script>
<style scoped>
:deep(img, svg, video, canvas, audio, iframe, embed, object) {
  display: none;
}
</style>
